<template>
  <div class="login">
    <div class="blueground"></div>
    <div class="Welcome">
      <p style="font-size: 16px" class="ENGWel">
        Welcome to back office management
      </p>
      <p class="CNWel">欢迎来到后台管理系统</p>
    </div>
    <div class="circle" v-for="(item, index) in 4" :key="index"></div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      class="demo-ruleForm box"
      ref="formRef"
      @keyup.enter="Submit"
    >
      <h2 class="title">欢迎登录</h2>
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="ruleForm.userName" placeholder="请输入用户名">
          <template #prefix>
            <el-icon><User /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <div style="margin: 20px"></div>
      <el-form-item label="密码" prop="userPwd">
        <el-input
          v-model="ruleForm.userPwd"
          placeholder="请输入密码"
          type="userPwd"
          show-password
        >
          <template #prefix>
            <el-icon><Lock /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <div class="btn-box">
          <el-button :loading="loading" @click="Submit(formRef)"
            >登录</el-button
          >
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import requestApi from "../api/requestApi";
import { useRouter, useRoute } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { AxiosResponse } from "axios";
import { showMassage, Cookies } from "../untils/common";
import { LoginInfo, userinfo } from "@/types/type";
const router = useRouter();
const route = useRoute();
const ruleForm: any = reactive({
  userName: "何正汉",
  userPwd: "hzh123",
});
const rules = reactive<FormRules>({
  userName: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
  ],
  userPwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
onMounted(async () => {
  // console.log(res);
});

// 表单元素
let formRef = ref<FormInstance>();
let loading = ref<boolean>(false);

// 提交
async function Submit(formEl: FormInstance | undefined) {
  if (!formEl) return;
  loading.value = true;
  await formEl.validate(async (vaild, fields) => {
    if (vaild) {
      const res = (await requestApi.login(ruleForm).finally(() => {
        loading.value = false;
      })) as AxiosResponse;
      console.log(res);
      Cookies.setToken(res.data.token)
      router.push('/')
    } else {
      console.log("提交失败", fields);
    }
  });
}
</script>

<style scoped>
@import "~/assets/login/style.css";
</style>
